<template>
	<view class="blog-item">
		<view class="head">
			<view class="authinfo">
				<view class="avater">
					<u-avatar v-if="item.user_id[0] && item.user_id[0].avatar_file && item.user_id[0].avatar_file.url"
						:src="item.user_id[0].avatar_file.url" size="30"></u-avatar>
					<u-avatar v-else src="../../uni_modules/uni-id-pages/static/login/uni-fab-login/user.png"
						size="30"></u-avatar>
				</view>
				<view class="name">
					<text>{{ item.user_id[0].nickname || item.user_id[0].username }}</text>
				</view>
				<view class="time">
					<uni-dateformat :date="item.publish_date" format="yyyy年MM月dd hh:mm"
						:threshold="[60000,3600000*24*30]"></uni-dateformat>
				</view>
			</view>
			<view class="more" @click.stop="onSelect">
				<text class="iconfont icon-gengduo"></text>
			</view>
		</view>
		<view class="body">
			<view class="title">
				<text>{{ item.title }}</text>
			</view>
			<view class="content" v-if="item.description">
				<text>{{ item.description }}</text>
			</view>
			<view class="piclist" v-if="item.picurls">
				<view class="pic" v-for="(item,index) in item.picurls" :key="index">
					<image :src="item" mode="aspectFill" @click.stop="onPreview(index)"></image>
				</view>
			</view>
			<view class="info">
				<view class="box"><text class="iconfont icon-liulanliang"></text><text>{{ item.view_count }}</text>
				</view>
				<view class="box"><text
						class="iconfont icon-jianyi"></text><text>{{ item.comment_count?item.comment_count:'评论' }}</text>
				</view>
				<view class="box" :class="item.isLike?'active':''" @click.stop="onclick"><text
						class="iconfont icon-dianzan"></text><text>{{ item.like_count?item.like_count:'点赞' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'

	import pageJson from '@/pages.json'
	import {
		store
	} from '../../uni_modules/uni-id-pages/common/store.js'

	const db = uniCloud.database()

	const utilsObj = uniCloud.importObject('utilsobj', {
		customUI: true
	})

	const emit = defineEmits(['delEvent'])

	let times = null;

	const {
		item
	} = defineProps({
		item: Object
	})

	const methods = {
		'修改': () => {
			console.log('触发修改');
		},
		'删除': () => {
			uni.showLoading({
				title: '删除中...'
			})
			db.collection('blog').doc(item._id).update({
				delStatus: true
			}).then(res => {
				uni.hideLoading()
				uni.showToast({
					title: '删除成功!',
					icon: 'none'
				})
				emit('delEvent', item)
			}).catch(e => uni.hideLoading())
		}
	}

	const actionlist = ['修改', '删除']

	const onclick = async () => {
		if (!store.hasLogin) {
			uni.showModal({
				title: '登录才可进行操作',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: "/" + pageJson.uniIdRouter.loginPage
						})
					}
				}
			})
			return;
		}
		if (times != null) {
			uni.showToast({
				title: '频繁操作',
				icon: 'none'
			})
			clearTimeout(times);
		}
		times = setTimeout(async () => {
			let count = await db.collection('blog-like').where(
				`article_id == '${item._id}' && user_id == $cloudEnv_uid`).count()
			if (count.result.total) {
				item.isLike = false
				db.collection('blog-like').where(
					`article_id == '${item._id}' && user_id == $cloudEnv_uid`).remove()
				utilsObj.operation('blog', 'like_count', item._id, -1)
				item.like_count--
			} else {
				item.isLike = true
				db.collection('blog-like').add({
					article_id: item._id
				})
				utilsObj.operation('blog', 'like_count', item._id, 1)
				item.like_count++
			}
			times = null
		}, 100)
	}

	const onSelect = () => {
		let uid = uniCloud.getCurrentUserInfo()
		uni.showActionSheet({
			itemList: actionlist,
			success: function(res) {
				if (uid.uid === item.user_id[0]._id || (uid.role && uid.role.includes('admin')) || (uid
						.role &&
						uid.role.includes('admin02'))) {
					methods[`${actionlist[res.tapIndex]}`]()
				} else {
					uni.showToast({
						title: '没有权限',
						icon: 'none'
					})
				}
			},
			fail: function(res) {
				console.log(res.errMsg);
			}
		})
	}

	const onPreview = (index) => {
		uni.previewImage({
			urls: item.picurls,
			current: index
		})
	}
</script>

<style scoped lang="scss">
	.blog-item {
		width: 100%;
		display: flex;
		flex-direction: column;

		.head {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.authinfo {
				display: flex;
				font-size: 28rpx;
				justify-content: center;
				align-items: center;

				.avatar {
					margin: 10rpx;
				}

				.name {
					margin: 10rpx;
				}

				.time {
					margin: 10rpx;
					color: #999;
					font-size: 20rpx;
				}
			}

			.more {
				margin-right: 5rpx;

				.iconfont {
					font-size: 35rpx;
				}
			}
		}

		.body {
			margin-top: 10rpx;

			.title {
				font-size: 40rpx;
				font-weight: 550;
				color: #000;
			}

			.content {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: #999;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.piclist {
				width: 100%;
				display: flex;
				margin-top: 20rpx;

				.pic {
					width: 225rpx;
					height: 225rpx;
					margin: 0 calc((100% - 3 * 225rpx) / 3 / 2);

					image {
						width: 100%;
						height: 100%;
					}

					&:first-child image {
						border-radius: 10rpx 0 0 10rpx;
					}

					&:last-child image {
						border-radius: 0 10rpx 10rpx 0;
					}

					&:only-child image {
						border-radius: 10rpx;
					}
				}
			}
		}

		.info {
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 26rpx;
			color: #333;
			margin-top: 20rpx;

			.box {
				display: flex;
				align-items: center;
				padding: 15rpx 0 5rpx;
				flex: 1;
				justify-content: center;

				.iconfont {
					font-size: 40rpx;
					padding-right: 10rpx;
				}

				&.active {
					color: #e86262;
				}
			}
		}

	}
</style>